<template>
  <a-modal
    title="修改头像"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :width="800"
    :footer="null"
    @cancel="cancelHandel"
  >
    <a-row>
      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <vue-cropper
          ref="cropper"
          :img="options.img"
          :info="true"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :fixedBox="options.fixedBox"
          @realTime="realTime"
        ></vue-cropper>
      </a-col>
      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <div class="avatar-upload-preview">
          <img :src="previews.url" :style="previews.img" />
        </div>
      </a-col>
    </a-row>
    <br />
    <a-row>
      <a-col :lg="2" :md="2">
        <a-upload name="file" :beforeUpload="beforeUpload" :showUploadList="false">
          <a-button icon="upload">选择图片</a-button>
        </a-upload>
      </a-col>
      <a-col :lg="{span: 1, offset: 2}" :md="2">
        <a-button icon="plus" @click="changeScale(1)" />
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="minus" @click="changeScale(-1)" />
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="undo" @click="rotateLeft" />
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="redo" @click="rotateRight" />
      </a-col>
      <a-col :lg="{span: 2, offset: 6}" :md="2">
        <a-button type="primary" @click="finish('blob')">保存</a-button>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script>
export default {
    data() {
        return {
            visible: false,
            id: null,
            confirmLoading: false,
            fileList: [],
            uploading: false,
            options: {
                // img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                img: '',
                autoCrop: true,
                autoCropWidth: 200,
                autoCropHeight: 200,
                fixedBox: true
            },
            previews: {}
        }
    },
    methods: {
        edit(id) {
            this.visible = true
            this.id = id
            /* 获取原始头像 */
        },
        close() {
            this.id = null
            this.visible = false
        },
        cancelHandel() {
            this.close()
        },
        changeScale(num) {
            num = num || 1
            this.$refs.cropper.changeScale(num)
        },
        rotateLeft() {
            this.$refs.cropper.rotateLeft()
        },
        rotateRight() {
            this.$refs.cropper.rotateRight()
        },
        beforeUpload(file) {
            const reader = new FileReader()
            // 把Array Buffer转化为blob 如果是base64不需要
            // 转化为base64
            reader.readAsDataURL(file)
            reader.onload = () => {
                this.options.img = reader.result
            }
            // 转化为blob
            // reader.readAsArrayBuffer(file)

            return false
        },

        // 上传图片（点击上传按钮）
        finish(type) {
            console.log('finish')
            const _this = this
            const formData = new FormData()
            // 输出
            if (type === 'blob') {
                this.$refs.cropper.getCropBlob(data => {
                    const img = window.URL.createObjectURL(data)
                    this.model = true
                    this.modelSrc = img
                    formData.append('file', data, this.fileName)
                    this.$http
                        .post('https://www.mocky.io/v2/5cc8019d300000980a055e76', formData, {
                            contentType: false,
                            processData: false,
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                        })
                        .then(response => {
                            console.log('upload response:', response)
                            // var res = response.data
                            // if (response.status === 'done') {
                            //   _this.imgFile = ''
                            //   _this.headImg = res.realPathList[0] // 完整路径
                            //   _this.uploadImgRelaPath = res.relaPathList[0] // 非完整路径
                            //   _this.$message.success('上传成功')
                            //   this.visible = false
                            // }
                            _this.$message.success('上传成功')
                            _this.$emit('ok', response.url)
                            _this.visible = false
                        })
                })
            } else {
                this.$refs.cropper.getCropData(data => {
                    this.model = true
                    this.modelSrc = data
                })
            }
        },
        okHandel() {
            const vm = this

            vm.confirmLoading = true
            setTimeout(() => {
                vm.confirmLoading = false
                vm.close()
                vm.$message.success('上传头像成功')
            }, 2000)
        },

        realTime(data) {
            this.previews = data
        }
    }
}
</script>

<style lang="less" scoped>
.avatar-upload-preview {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>
